<template>
  <div id="app">
    <mt-header fixed :title="selected" v-show="isShow" v-if="isShow_my"></mt-header>
    <div class="d1">
      <keep-alive include="HelloWorld">
        <router-view />
      </keep-alive>
      <audio
        v-show="getm.musicMp3Url"
        autoplay
        :src="getm.musicMp3Url"
        controls
        class="audio"
      ></audio>
    </div>
    <!-- 底部选项卡 -->
    <mt-tabbar v-model="selected" fixed @click.native="change()" v-show="isShow">
      <mt-tab-item id="首页" :class="{ selectitem: selected == '首页' }">
        <img slot="icon" src="./assets/首页.png" v-show="selected != '首页'" />
        <img slot="icon" src="./assets/首页 (1).png" v-show="selected == '首页'" />
        首页
      </mt-tab-item>
      <mt-tab-item id="分类" :class="{ selectitem: selected == '分类' }">
        <img slot="icon" src="./assets/分类.png" v-show="selected != '分类'" />
        <img slot="icon" src="./assets/分类（1）.png" v-show="selected == '分类'" />
        分类
      </mt-tab-item>
      <mt-tab-item id="购物车" class="shop" :class="{ selectitem: selected == '购物车' }">
        <mt-badge size="small" class="bange" v-show="getCount.length != 0">{{
          getCount.length
        }}</mt-badge>
        <img slot="icon" src="./assets/购物车.png" v-show="selected != '购物车'" />
        <img slot="icon" src="./assets/购物车 (1).png" v-show="selected == '购物车'" />
        购物车
      </mt-tab-item>
      <mt-tab-item id="我的" :class="{ selectitem: selected == '我的' }">
        <img slot="icon" src="./assets/我的.png" v-show="selected != '我的'" />
        <img slot="icon" src="./assets/我的 (1).png" v-show="selected == '我的'" />
        我的
      </mt-tab-item>
    </mt-tabbar>
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      selected: "首页",
      isShow: false,
      isShow_my: true,
    };
  },
  methods: {
    change() {
      sessionStorage.setItem("title", this.selected);
      if (this.selected == "首页") {
        this.$router.push("/HelloWorld").catch((e) => {});
      } else if (this.selected == "我的") {
        this.$router.push("/My").catch((e) => {});
      } else if (this.selected == "分类") {
        this.$router.push("/Classify").catch((e) => {});
      } else if (this.selected == "购物车") {
        this.$router.push("/shopping").catch((e) => {});
      }
    },
  },
  mounted() {
    var title = sessionStorage.getItem("title");
    if (title) {
      this.selected = title;
    }
  },
  computed: {
    getCount() {
      return this.$store.state.list;
    },
    getm() {
      return this.$store.state.mInfo;
    },
  },

  watch: {
    $route: {
      handler(path) {
        if (
          path.path == "/Detail" ||
          path.path == "/Register" ||
          path.path == "/Login" ||
          path.path == "/byCode" ||
          path.path == "/Amend" ||
          path.path == "/mdetail" ||
          path.path == "/search"
        ) {
          this.isShow = false;
        } else {
          this.isShow = true;
        }
        if (path.path == "/My") {
          this.isShow_my = false;
        } else {
          this.isShow_my = true;
        }
        if (path.path == "/HelloWorld") {
          this.selected = "首页";
        }
        if (path.path == "/Shopping") {
          this.selected = "购物车";
        }
        if (path.path == "/Classify") {
          this.selected = "分类";
        }
        if (path.path == "/My") {
          this.selected = "我的";
        }
        sessionStorage.setItem("title", this.selected);
      },
      immediate: true,
    },
  },
};
</script>

<style>
* {
  margin: 0;
  padding: 0;
}
/* #app {
  text-align: center;
} */
/* .d1 {
  margin-top: 45px;
} */
.bange {
  position: absolute;
  top: 7px;
  left: 55px;
}
.shop {
  position: relative;
}
.selectitem {
  color: red !important;
}
.audio {
  position: fixed;
  bottom: 60px;
}
</style>
